﻿<!DOCTYPE html>
<html>
<head>
    <title>Lava:  Templates</title>
    <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>
    <link href='../css/demos.css' rel='stylesheet' type='text/css'>
    <script src="../scripts/lava.js" type="text/javascript"></script>
    <script type="text/html" id="person-template">
        <li id="{i}" data-bind="{text: [i].fullName}" id="person-{{[i].id}}" data-hasnote="{{[i].hasNote}}"></li>
    </script>
    <script type="text/html" id="sample-person-template">
        <span data-bind="{text: samplePerson.fullName}"></span>
    </script>
    <script type="text/javascript">
        var Person = Lava.Object({
            id: 0,
            firstName: '',
            lastName: '',
            fullName: Lava.Computed(function () {
                return this.firstName + ' ' + this.lastName;
            }),
            hasNote: function () {
                return true;
            }
        });

        var samplePerson = Person.clone({
            firstName: 'Terry',
            lastName: 'Phillips'
        });

        var Controller = Lava.Controller({
            people: []
        });

        Controller.people.add(Person.clone({ id: 1, firstName: 'Terry', lastName: 'Phillips' }));
        Controller.people.add(Person.clone({ id: 2, firstName: 'John', lastName: 'Doe' }));
    </script>
</head>
<body>
    <div class="content">
        <h3>Binding an Object to a Template</h3>
        <div class="content">
            <h3 data-bind="{template: 'sample-person-template'}"></h3>
        </div>

        <h3>Binding an Array to a Template</h3>
        <div class="content">
            <ul data-bind="{foreach: {bind: Controller.people, template: 'person-template'}}"></ul>
        </div>
    </div>
</body>
</html>
